<template>
	<view>
		<view class="ipt_index">
			<u-input :customStyle="myiptStyle" :prefixIcon="prefixIcon" :suffixIcon="suffixIcon"
				:prefixIconStyle="prefixStyle" :suffixIconStyle="suffixStyle" border="surround" class="ipt" clearable
				@clear="onClear" @input="handleInput" @confirm="doSearch" :value="value" :placeholder="placeholder">
			</u-input>
		</view>
	</view>
</template>

<script>
	export default {
		name: "search",
		data() {
			return {
				myiptStyle: {
					backgroundColor: 'rgb(255, 255, 255)',
					borderRadius: '50rpx'
				},
				prefixStyle: {
					fontSize: '18px',
					color: '#f86853',
					borderRadius: '50%'
				},
				suffixStyle: {
					padding: '8px',
					// textAlign: 'center',
					fontSize: '18px',
					color: 'white',
					backgroundColor: '#f86853',
					borderRadius: '50%',
				},
				query: ""
			};
		},
		props: {
			prefixIcon: {
				type: String
			},
			suffixIcon: {
				type: String
			},
			value: {
				type: String
			},
			placeholder: {
				type: String,
				default: "请输入内容"
			}
		},
		methods: {
			doSearch() {
				this.$emit('submit', this.query)
			},
			onClear() {
				this.query = ''
			},
			handleInput(value) {
				this.query = value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ipt_index {
		margin: 20rpx 0;


		.ipt .el-input__prefix .el-input__icon {
			font-weight: bolder;
		}

		.ipt {
			border: 1px solid rgb(251, 174, 163);
			border-radius: 60rpx;
		}

	}
</style>
